<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button{
            width: 50px;
            height: 20px;
        }
    </style>
</head>
<body>
    <button id="allc">全选</button> 
    <button id="allq">取消</button>
    <button id="fs">反选</button><br>
   1 <input type="checkbox" class="op" /><br/>
   2 <input type="checkbox" class="op" /><br/>
   3 <input type="checkbox" class="op" /><br/>
   4 <input type="checkbox" class="op" /><br/>
   5 <input type="checkbox" class="op" /><br/>
   6 <input type="checkbox" class="op" /><br/>
   7 <input type="checkbox" class="op" /><br/>
   8 <input type="checkbox" class="op" /><br/>
   9 <input type="checkbox" class="op" /><br/>
   0 <input type="checkbox" class="op" /><br/>


   <script>
        var allc = document.getElementById("allc");
        var allq = document.getElementById("allq");
        var fs = document.getElementById("fs");
        var ops = document.getElementsByClassName("op")
        allc.onclick = function(){
            for(var i = 0;i<ops.length;i++){
                ops[i].checked = true;
            }
        }
        allq.onclick = function(){
            for(var i = 0;i<ops.length;i++){
                ops[i].checked = false;
            }
        }
        fs.onclick = function(){
            for(var i = 0;i<ops.length;i++){
                ops[i].checked?ops[i].checked=false:ops[i].checked=true;
            }
        }
   </script>
</body>
</html>